<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>时间轴折线柱状切换图</title>
	</head>
	<script src="/static/js/echarts.min.js"></script>

	<body>
		<div id="main" style="width: 1000px;height:600px;"></div>
	</body>
	<script>
		/*
			时间轴组件提供：
		timeline: {
					loop: true,
					axisType: 'category',
					show: true,
					autoPlay: true,
					playInterval: 2000,
					data: 
				}
		*/

		var myChart = echarts.init(document.getElementById('main'));
		option = {
			baseOption: {
				timeline:{
					loop: true,
					axisType: 'category',
					show: true,
					autoPlay: true,
					playInterval: 2000,
					data: [{% for i in mytmp.keys()%} "{{ i }}",  {% endfor %}]
				},
				grid: {
					containLabel: true
				},
				xAxis: [{
					type: 'category',
					data: [{% for i in mylist%} "{{ i }}",{%endfor%}]
				}],
				yAxis: {
					type: 'value',
					axisLine: {
						show: true,
						lineStyle: {
							color: '#0066CC'
						}
					}
				},
				tooltip:{
					tragger:"axis"
				},
				 toolbox: {
					feature: {
						// dataView:{show:true,readOnly:true},
						magicType:{type:['line','bar'],show:true}
					}
				},
				series: [{
					type: 'bar'
				}]
			},
			options: [
				{% for j in mytmp.keys() %}
					{
						title:{
							text:"{{j}}"
						},
						series:[{

							data: [{% for x in range(5) %} {name:"{{ mylist[x] }}",value:{{ mytmp[j][x] }}}, {%endfor%}]
						}]
					},
				{% endfor %}
			]
		}

		myChart.setOption(option);
	</script>

</html>